<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级版西游记角色点名器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
        }
        .list{
            width: 300px;
        }
        .main{
            width: 600px;
            border: 1px solid #333;
        }
        button{
            width: 100%;
            height: 50px;
        }
        li{
            list-style: none;
            width: 100px;
            height: 100px;
            border: 1px solid #333;
            box-sizing: border-box;
            line-height: 100px;
            text-align: center;
            float: left;
        }
        .active{
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="list">
        <h2>天选之子</h2>
    </div>
    <div class="main">
        <button>开始</button>
        <ul class="content"></ul>
    </div>
    <script type="text/javascript">
        let data = ["孙悟空","唐僧","猪八戒", "沙僧","白龙马","观音菩萨","如来佛祖","玉皇大帝","太白金星","牛魔王","铁扇公主","红孩儿", "哪吒","托塔天王","蜘蛛精","白骨精","金角大王","银角大王"]
        let btn = document.querySelector("button")
        let content = document.querySelector(".content")
        let list = document.querySelector(".list")

        let time = null
        let index = 0

        function createLi(){
            content.innerHTML = ""
            data.forEach(item => {
                let newLi = document.createElement("li")
                newLi.textContent = item
                content.appendChild(newLi)
            })
            if(data.length > 0) {
                content.children[0].classList.add("active")
            }
        }
        createLi()

        btn.onclick = function(){
            if (this.textContent === "开始"){
                if (data.length === 0) {
                    alert("所有角色都已抽完！")
                    return
                }
                prize()
                this.textContent = "结束"
            } else {
                clearInterval(time)
                this.textContent = "开始"
                if(data[index]) {
                    let h2 = document.createElement("h2")
                    h2.textContent = data[index]
                    list.appendChild(h2)
                    data.splice(index, 1)
                    createLi()
                }
            }
        }

        function prize(){
            clearInterval(time)
            time = setInterval(() => {
                const lis = content.querySelectorAll("li")
                if (lis.length === 0) return
                
                lis.forEach(li => li.classList.remove("active"))
                index = Math.floor(Math.random() * data.length)
                lis[index].classList.add("active")
            }, 100)
        }
    </script>
</body>
</html>